<template>
  <div>
    御剑乘风来,除魔天地间!===home
    <div class="top">
      <button @click="flag=!flag">收起</button>
      <span>
        <button @click="goback" class="tui">退出登录</button>
      </span>
    </div>
    <div class="main">
      <div :class="['left',flag?'':'shou']">
        <ul>
          <li>
            <router-link to="/firstVue">我是first</router-link>
          </li>
          <li>
            <router-link to="/second?id=2">我是second</router-link>
          </li>
          <li>
            <router-link to="/third/3">我是third</router-link>
          </li>
          <li>
            <router-link to="/forth/4?shu=4">我是forth</router-link>
          </li>
        </ul>
      </div>
      <div class="right">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>

      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      flag: true
    }
  },
  // activated(){
  //   console.log('home=====activated');
  // },
  // deactivated(){
  //   console.log('home=====deactivated');
  // },
  created () {
  },
  computed: {
  },
  methods: {
    goback () {
      this.$router.push({ name: 'login' })
    }
  }
}
</script>
<style lang='less'  scoped>

.router-link-exact-active {
  background-color: yellow;
}
a {
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.top {
  width: 100%;
  height: 100px;
  background-color: pink;
  span {
    float: right;
    button {
      background-color: rgba(255, 255, 255, 0.8);
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      color: #444;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    }
  }
}
.main {
  height: 600px;
  display: flex;
  .left {
    width: 200px;
    height: 100%;
    background-color: yellowgreen;
    &.shou{
  width: 100px;
  transition: all 1s;
  z-index: 99;
}

    ul {
      list-style: none;

      li {
        padding: 30px 0;
      }
    }
  }
  .right {
    flex: 1;
    background-color: hotpink;
  }
}
.footer {
  width: 100%;
  height: 200px;
  background-color: blueviolet;
}
</style>
